<template name="address-item">
    <view class="container">
        <u-cell
            :isLink="true"
            size="large"
            rightIconStyle="font-size: 44rpx"
            @click="go(item)"
        >
            <view class="cell-title" slot="title">
                <view class="inline-block mr-30">
                    <u-text
                        :text="item.name"
                        size="32rpx"
                        bold
                    ></u-text>
                </view>
                <view class="inline-block mr-15">
                    <u-text
                        :text="item.mobile"
                        mode="phone"
                        format="encrypt"
                        size="32rpx"
                        bold
                    ></u-text>
                </view>
                <view class="badge" v-if="item.id == defaultAddressId">
                    默认
                </view>
            </view>
            <u-text
                :text="item.detail"
                size="24rpx"
                color="#999999"
                :lines="2"
                slot="label"
            ></u-text>
        </u-cell>
    </view>
</template>

<script>
export default {
    name: "address-item",
    props: {
        item: {
            type: Object,
            default: {}
        },
        onTap: {
            type: Function
        },
        defaultAddressId: {
            type: Number
        }
    },
    methods: {
        go(item) {
            this.$emit('onTap', item)
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .cell-title {
            display: flex;
            align-items: center;
            margin-bottom: 5rpx;
            .inline-block {
                //display: inline-block;
                margin-bottom: 5rpx;
                margin-top: 10rpx;
            }
            .mr-30 {
                margin-right: 30rpx;
            }
            .mr-15 {
                margin-right: 15rpx;
            }
            .badge {
                width: 70rpx;
                //display: inline-block;
                text-align: center;
                padding: 5rpx 10rpx;
                background: #000000;
                text-align: center;
                font-size: 22rpx;
                color: #ffffff;
                border-radius: 20rpx;
            }
        }
        .bottom {
            box-sizing: border-box;
            position: fixed;
            width: 100%;
            padding: 0 20rpx;
            bottom: 33rpx;
        }
        .custom-style {
            background: #000000;
            color: #ffffff;
        }
    }
</style>
